<template>
	<div class="icons">	
		<swiper :options="swiperOption">
			<!-- slides -->
			<swiper-slide v-for="(page,index) of pages" :key="index">
				<div v-for="item of page" :key="item.id" class="icons-div">
					<img :src="item.iconsUrl" class="icons-div-img">
					<span class="icons-div-span">{{item.title}}</span>
				</div>
			</swiper-slide>
			<!-- Optional controls -->
			<div class="swiper-pagination"  slot="pagination"></div>
		</swiper>	
	</div>
</template>

<script>
	export default {
		name:"HomeIcons",
		props:{
			iconsList:Array
		},
		data:function(){
			return{
				swiperOption:{
				// 不支持循环展示
			　　loop:false,
				// 加入轮播图中的点
				pagination:'.swiper-pagination',
				},
			}
		},
		// 计算图标展示在第几页
		computed:{
			pages:function(){
				const pages=[]
				var pagenum=this.iconsList.forEach((item,index) => {
					// 判断在第几页展示0.8=0 1.2=1 1.6=1 
					var page=Math.floor(index/8)
					if(!pages[page]){
						pages[page]=[]
					}
					//往数组添加对象
					pages[page].push(item)
				})
				return pages
			}, 
		}
	}
</script>
<style lang="stylus" scoped>
	// 引入全局变量
	@import "~style/varibles.styl"
	// 引入字符串溢出缩减...
	@import "~style/mixmin.styl"
	
	.icons
		overflow: hidden;
		/* font-family: serif; */
		padding-left:3%;
		width: 100%;
		height: 0;
		padding-bottom: 49%;
		background-color: white;
		.icons-div
			position: relative;
			float: left;
			width: 25%;
			height: 0;
			padding-bottom: 25%;
			background-color: white;
			.icons-div-img
				overflow: hidden;
				position: absolute;
				top: 0;
				width: 70%;
				padding-left: 0.35rem;
				padding-top: 0.1rem;
				// padding-right: 0.05rem;
				box-sizing: border-box;
			.icons-div-span
				position: absolute;
				top: 0;
				width: 80%;
				padding-top: 65%;
				text-align: center;
				color: $darkTextColor;
				// 字符串缩减...
				ellipsis()
</style>
